<template>
  <div class="user-container">
    <!-- 忘记密码 -->
    <div class="my-header">
      <i class="back" @click="closeForget()"></i>
      <strong>修改密码</strong>
      <i class="myMsg"></i>
    </div>
    <div class="from-container">
      <div class="cell-list">
        <div class="cell-item">
          <div class="left">
            <i class="iconfont icon-message"></i>
          </div>
          <div class="right">
            <input v-focus type="text" name="forgetPhone" v-model="forgetForm.phone" placeholder="请输入手机号">
          </div>
          <i class="clear" v-show="forgetForm.phone.length>0" @click="forgetForm.phone=''"></i>
        </div>
        <div class="cell-item code-box">
          <div class="left">
            <i class="iconfont icon-message"></i>
          </div>
          <div class="right code-cell">
            <input name="forgetCode" type="tel" v-model="forgetForm.code" placeholder="请输入验证码">
          </div>
          <i class="clear" v-show="forgetForm.code.length>0" @click="forgetForm.code=''" style="right:120px;"></i>
          <div :class="['registered-getCode',forgetForm.resetSendPhoneMessage?'disabled-btn':'']" @click="forgetSendPhoneMessage" :disabled="forgetForm.resetSendPhoneMessage">{{forgetForm.resetSendPhoneMessage ? `(${forgetForm.resetSendPhoneMessage})` : '获取验证码'}}</div>
        </div>
        <div class="cell-item">
          <div class="left">
            <i class="iconfont icon-message"></i>
          </div>
          <div class="right">
            <input @focus="errMessage=''" name="forgetPassword" :type="forgetForm.passwordFormType" v-model="forgetForm.password" placeholder="请设置新密码">
          </div>
          <i class="clear" v-show="forgetForm.password.length>0" @click="forgetForm.password=''" style="right: 40px;"></i>
          <i :class="['eye-icon', forgetForm.passwordFormType=='password'?'eye-close-icon':'']" style="position: absolute;right: 10px;"
            @click="forgetForm.passwordFormType=forgetForm.passwordFormType=='password'?'text':'password'"></i>
        </div>
        <div class="cell-item">
          <div class="left">
            <i class="iconfont icon-message"></i>
          </div>
          <div class="right">
            <input name="forgetConfirmPassword" :type="forgetForm.passwordConfirmFormType" v-model="forgetForm.confirmpassword" placeholder="请重复新密码">
          </div>
          <i class="clear" v-show="forgetForm.confirmpassword.length>0" @click="forgetForm.confirmpassword=''" style="right: 40px;"></i>
          <i :class="['eye-icon', forgetForm.passwordConfirmFormType=='password'?'eye-close-icon':'']" style="position: absolute;right: 10px;"
            @click="forgetForm.passwordConfirmFormType=forgetForm.passwordConfirmFormType=='password'?'text':'password'"></i>
        </div>
      </div>
      <div class="notice">{{errMessage}}</div>
      <div class="cell-box">
        <div :class="['cell-btn',forgetForm.phone==''||forgetForm.code==''||forgetForm.password==''||forgetForm.confirmpassword==''?'disabled-btn':'']"
          @click="()=>{forgetForm.phone==''||forgetForm.code==''||forgetForm.password==''||forgetForm.confirmpassword==''?false:forgetValidatePhoneMessag()}">找回登录密码</div>
      </div>
      <div class="service">
        联系客服： <a href="javascript:;">021-88888888</a>
      </div>
    </div>
    <!-- 忘记密码 -->
  </div>
</template>
<script>
  import {
    Toast
  } from 'mint-ui'
  import {
    encryptString
  } from '@/utils/mixin'
  import {
    sendPhoneCode,
    validateCode,
    registered,
    resetUserPwd
  } from '@/api/user'
  import * as Validate from '@/utils/validate'

  export default {
    data() {
      return {
        errMessage: '',
        visiblePopup: {
          forget: true
        },
        loginForm: {
          username: '',
          password: '',
          passwordFormType: 'password'
        },
        registeredForm: {
          phone: '',
          code: '',
          password: '',
          confirmpassword: '',
          passwordFormType: 'password',
          passwordConfirmFormType: 'password',
          resetSendPhoneMessage: null
        },
        forgetForm: {
          phone: '',
          code: '',
          password: '',
          confirmpassword: '',
          passwordFormType: 'password',
          passwordConfirmFormType: 'password',
          resetSendPhoneMessage: null
        }
      }
    },
    methods: {
      closeOpen() {
        this.visiblePopup.login = false
        setTimeout(() => {
          this.$router.go(-1)
        }, 200)
      },
      closeResetPwd() {
        setTimeout(() => {
          this.visiblePopup.resetPwdSuccess = false
        }, 1200)
      },
      closeRegiter() {
        this.registeredForm.phone = ''
        this.registeredForm.code = ''
        this.registeredForm.password = ''
        this.registeredForm.confirmpassword = ''
        this.visiblePopup.registered = false
      },
      closeForget() {
        this.forgetForm.phone = ''
        this.forgetForm.code = ''
        this.forgetForm.password = ''
        this.forgetForm.confirmpassword = ''
        this.visiblePopup.forget = false
      },
      handleLogin() { // 登录
        const userPwd = encryptString(this.loginForm.password, 0)
        this.$store.dispatch('DoLogin', {
          userAccount: this.loginForm.username,
          userPwd: userPwd
        }).then(response => {
          const redirectUrl = decodeURIComponent(this.$route.query.redirect || '/')
          // 跳转到指定的路由
          this.$router.push({
            path: redirectUrl
          })
        }).catch(error => {
          Toast({
            message: error.info,
            position: 'bottom'
          })
        })
      },
      sendPhoneMessage() { // 获取验证码
        if (!Validate.mobile(this.registeredForm.phone)) {
          this.errMessage = '请输入正确手机号'
          return false
        }
        // 获取验证码
        sendPhoneCode({
          tel: this.registeredForm.phone,
          fal: true // 注册要验证手机是否存在系统中
        }).then(res => {
          this.registeredForm.resetSendPhoneMessage = 90
          const times = setInterval(() => {
            if (this.registeredForm.resetSendPhoneMessage <= 0) {
              this.registeredForm.resetSendPhoneMessage = null
              clearInterval(times)
            } else {
              this.registeredForm.resetSendPhoneMessage--
            }
          }, 1000)
        }).catch(err => {
          Toast({
            message: err.info
          })
        })
      },
      validatePhoneMessag() { // 验证注册短信验证码
        if (!Validate.mobile(this.registeredForm.phone)) {
          this.errMessage = '手机格式不正确'
          return false
        }
        if (this.registeredForm.password !== this.registeredForm.confirmpassword) {
          this.errMessage = '密码不一致'
          return false
        }
        // 验证验证码
        const formData = {
          tel: this.registeredForm.phone,
          code: this.registeredForm.code,
          fal: true, // 手机号不在系统中
          time: 1 // 1：15分钟后过期
        }
        validateCode(formData).then(res => {
          // 验证成功前去注册
          this.handleRegister()
        }).catch(err => {
          Toast({
            message: err.info,
            position: 'bottom'
          })
        })
      },
      handleRegister() { // 注册账号
        const userPwd = encryptString(this.registeredForm.confirmpassword, 0)
        const formData = {
          tel: this.registeredForm.phone,
          userPwd: userPwd
        }
        registered(formData)
          .then(res => {
            Toast({
              message: '注册成功'
            })
            this.visiblePopup.registered = false
          }).catch(err => {
            return Toast({
              message: err.info,
              position: 'bottom'
            })
          })
      },
      forgetSendPhoneMessage() { // 忘记密码获取验证码
        if (!Validate.mobile(this.forgetForm.phone)) {
          this.errMessage = '请输入正确手机号'
          return false
        }
        // 获取验证码
        sendPhoneCode({
          tel: this.forgetForm.phone,
          fal: 0 // 手机已经存在
        }).then(res => {
          this.forgetForm.resetSendPhoneMessage = 90
          const times = setInterval(() => {
            if (this.forgetForm.resetSendPhoneMessage <= 0) {
              this.forgetForm.resetSendPhoneMessage = null
              clearInterval(times)
            } else {
              this.forgetForm.resetSendPhoneMessage--
            }
          }, 1000)
        }).catch(err => {
          Toast({
            message: err.info
          })
        })
      },
      forgetValidatePhoneMessag() { // 验证忘记密码短信验证码
        if (!Validate.mobile(this.forgetForm.phone)) {
          this.errMessage = '手机格式不正确'
          return false
        }
        if (this.forgetForm.password !== this.forgetForm.confirmpassword) {
          this.errMessage = '密码不一致'
          return false
        }
        // 验证验证码
        const formData = {
          tel: this.forgetForm.phone,
          code: this.forgetForm.code,
          fal: 0, // 手机号不在系统中
          time: 1 // 1：15分钟后过期
        }
        validateCode(formData).then(res => {
          // 验证成功前去重置密码
          this.handleResetPwd()
        }).catch(err => {
          Toast({
            message: err.info
          })
        })
      },
      handleResetPwd() { // 重置密码
        const userPwd = encryptString(this.forgetForm.confirmpassword, 0)
        const formData = {
          userAccount: this.forgetForm.phone,
          userPwd: userPwd,
          code: this.forgetForm.code,
          time: 1
        }
        resetUserPwd(formData)
          .then(res => {
            // 重置密码成功页面
            this.visiblePopup.resetPwdSuccess = true
            this.closeForget()
            this.closeResetPwd()
          }).catch(err => {
            return Toast({
              message: err.info,
              position: 'bottom'
            })
          })
      }
    }

  }

</script>
<style lang="scss" scoped>
  @import '~assets/common/css/mixin.scss'; // @include flexbox()
  .user-container {
    background: #ffffff;
    @include wh(10rem, 100%);
    .clear {
      width: 16px;
      height: 16px;
      margin: 0;
      position: absolute;
      right: 10px;
      @include bg('~assets/common/images/close.png');
    }
    .top {
      height: 5rem;
      background: #8d8f90;
      text-align: center;
      .logo {
        @include flexbox(center,
        center,
        column,
        nowrap);
        img {
          width: 5rem;
          height: auto;
        }
        p {
          width: 5rem;
          padding-top: $padding;
          font-size: 0.4rem;
          color: #ffffff;
          text-align: justify;
          &:after {
            display: inline-block;
            width: 100%;
            content: '';
          }
        }
      }
    }
    .my-header {
      padding: $padding;
      @include flexbox(space-between,
      center,
      row,
      nowrap);
      margin-bottom: 30px;
      .back {
        display: block;
        width: .65rem;
        height: .65rem;
        background: url('~assets/common/images/close.png') no-repeat;
        background-size: 100%;
      }
      strong {
        font-size: 18px;
        font-weight: normal;
        color: #333;
      }
      .myMsg {
        display: block;
        width: .65rem;
        height: .65rem;
      }
      .register-btn {
        font-size: $subtitle;
        border: 1px solid #ffffff;
        border-radius: 14px;
        color: #ffffff;
        height: 28px;
        line-height: 28px;
        width: 50px; // color:#333;
        // display: block;
        // height: .65rem;
        // width: .65rem;
      }
    }
    .pop-container {
      height: 100%;
      .my-header .back {
        background: url('~assets/common/images/arrow-left.png') no-repeat;
        background-size: 100%;
      }

      .agreement-tips {
        font-size: 14px;
        line-height: 1.5;
        color: #777777;
        span {
          color: #f6ad34;
          cursor: pointer;
        }
      }
      .success-tips {
        text-align: center;
        line-height: 1.5;
        color: #777777;
        font-size: 14px;
        .iconfont {
          font-size: 100px;
          color: #f5a623;
        }
      }
      .content {
        padding: 15px;
        line-height: 1.5;
      }
    }
  }

  .from-container {
    padding: 1rem;
    .cell-list {
      .cell-item {
        @include flexbox(flex-start,
        center,
        row,
        nowrap);
        border-bottom: 1px solid #eee;
        padding: $padding $padding $padding 0;
        margin: $margin 0;
        position: relative;
        .left {
          i {
            position: absolute;
            font-size: 24px;
            top: 5px;
          }
        }
        .right {
          width: 80%;
          margin-left: 40px;
          @include placeholderColor($gray);
          input {
            width: 100%;
            border: none;
            outline: none;
            box-shadow: none;
            text-shadow: none;
            text-align: left;
            font-size: $title;
            color: #333;
          }
          .arrow-right {
            display: block;
            width: 16px;
            height: 20px;
            background: url('~assets/common/images/arrow-right.png') no-repeat;
            background-size: 100%;
          }
        }
      }
    }
    .other-link {
      @include flexbox(flex-end,
      center,
      row,
      nowrap);
      font-size: 15px;
      color: $gray;
      margin: $margin auto;
    }
  }

  .code-box {
    .code-cell {
      width: 50%!important;
    }
    .registered-getCode {
      position: absolute;
      right: 0;
      top: 6px;
      width: 100px;
      background: #333333;
      color: #fff;
      font-size: 15px;
      text-align: center;
      margin-left: 10px;
      border-radius: 15px;
      padding: 5px 8px;
    }
  }

  .quick-login {
    margin-top: 1.05rem;
    position: relative;
    text-align: center;
    .quick-wx {
      color: #333;
      i {
        font-size: 50px;
      }
    }
  }

  .notice {
    font-size: 13px;
    line-height: 1.5;
    color: #f23030;
    text-align: left;
  }

  .service {
    margin-top: 2rem;
    color: #777777;
    font-size: 14px;
    position: relative;
    text-align: center;
    a {
      text-decoration: underline;
      color: #333;
    }
  }

</style>
